<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部组件</title>
</head>
<body>
<div id="app1">
    <h1>--------app1实例--------</h1>
    <mytemplate></mytemplate>
    <mytemplate2></mytemplate2>
</div>
<div id="app2">
    <h1>--------app2实例--------</h1>
    <mytemplate></mytemplate>
    <mytemplate2></mytemplate2>
</div>
<!-- 1、定义组件的模板 -->
<template id="mytem">
    <div>
        <!-- 模板中添加事件 -->
        <img src="../img/1.jpg" @click="fn"/>
        <h2>{{msg}}</h2>
        <ul>
            <li>飞机</li>
            <li>火箭</li>
            <li>火车</li>
        </ul>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app1',
        data: {},
        /* 定义局部组件 */
        components: {
            'mytemplate': {
                template: '#mytem',
                data: function(){
                    return {
                        msg: '热门榜单'
                    }
                },
                methods: {
                    fn: function(){
                        console.log("图片被点击了...");
                    }
                }
            },
            'mytemplate2': {
                template: '<h1>这是局部组件2的内容</h1>'
            }
        }
    });
</script>